<template>
    <div style="padding: 20px;">
        <div class="resouces-main">
            <div style="padding-bottom: 10px;display: flex;">
              
                <i-button :level="'info'" @click.native="dialog.flag = true">上传资源</i-button>
                <div style="margin-left: 10px;font-size: 12px;color: #999;height: 40px;display: flex;align-items: flex-end;">只能上传10MB大小的文件</div>
            </div>
            <div class="resource-item" v-for="(item,index) in page.records" :key="index">
                <div class="resource-info">
                    <div class="file-name">{{ item.originalFilename }}</div>
                    <div class="file-label" >
                        <div style="line-height: 32px;height: 32px;margin-right: 10px;">标签:</div>
                        <el-tag 
                        style="margin-right: 10px;"  
                        effect="plain" v-for="(label,i) in item.labelList" 
                        :key="i"
                        @close="handleClose(label,index)"
                        closable
                        >
                            {{ label }}
                        </el-tag>
                        <el-input
                        class="input-new-tag"
                        v-if="item.inputVisible"
                        v-model="item.labelItem"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm(index,item)"
                        @blur="handleInputConfirm(index,item)"
                        >
                        </el-input>
                        <el-button v-else  class="button-new-tag" size="small" @click="showInput(item)">+ 添加标签</el-button>

                    </div>
                </div>
                <div class="resources-option">
                    <i-button class="copy-btn" :level="'info'" @click.native="copyFileUrl(item)">分享资源</i-button>
                    <i-button class="copy-btn" style="margin-left: 10px;" @click.native="deleteFile(item)">删除资源</i-button>
                </div>
            </div>
            <i-page style="margin-top: 10px;" :current="page.current" :size="page.size" :total="page.total" @change-page="changePageHandler"></i-page>
        </div>
        <el-dialog
        title="上传文件"
        :visible.sync="dialog.flag"
        width="40%"
        >
            <el-upload
            style="display: flex;justify-content: center;"
            :action="upload.url"
            :headers="upload.headers"
            list-type="picture-card"
            :on-success="handleFileSuccess"
           >
                <i class="el-icon-plus"></i>
            </el-upload>
        </el-dialog>
    </div>
</template>

<script>
import IButton from '@/components/plugs/i-button/IButton.vue'
import IPage from '@/components/plugs/i-page/IPage.vue';
import { get,post } from '@/utils/api.js';
import Clipboard from 'clipboard';
export default {

    data(){
        return{
            dialog:{
                flag:false,
                fileUrl:'',

            },
            page:{
                current:1,
                size:4,
                total:0,
                records:[
                    // {originalFilename:'文件名',link:'文件链接',labelList:['文件标签11','文件标签21','文件标签21','文件标签21']},
                    // {originalFilename:'文件名',link:'文件链接',labelList:['文件标签11','文件标签21','文件标签21','文件标签21']},
                    // {originalFilename:'文件名',link:'文件链接',labelList:['文件标签11','文件标签21','文件标签21','文件标签21']},
                    // {originalFilename:'文件名',link:'文件链接',labelList:['文件标签11','文件标签21','文件标签21','文件标签21']},
                    // {originalFilename:'文件名',link:'文件链接',labelList:['文件标签11','文件标签21','文件标签21','文件标签21']}
                ]
            },
            fileList:[],
            upload:{
                url:'https://api.sns.qugeek.com/base-file/file/upload',
                headers:{}
            },
            copyText:''

        }
    },
    methods:{
        handleClose(tag,index) {
            //发送请求,请求成功，删除索引中的元素

            this.page.records[index].labelList.splice(this.page.records[index].labelList.indexOf(tag), 1);

            const promise = post({
                url:'/base-file/file/delete/label',
                data:{id:this.page.records[index].id,labelList: this.page.records[index].labelList}
            });
            promise.then(res=>{
                if(res&&res.code === 200){
                    this.$message.success(res.message);
                    return;
                }
                this.getPage();
                this.$message.error('标签删除失败~');
            })
      },

      showInput(item) {
        let index = this.page.records.indexOf(item);
        item.inputVisible = true;
        this.$set(this.page.records,index,item);
        this.$nextTick(()=> {
        //   this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm(index,item) {
        if(!this.page.records[index].labelList){
            this.page.records[index].labelList = [];
        }
        let inputValue = item.labelItem;
        if (inputValue) {
            if(inputValue.length>7){
                this.$message.error('标签不能超过7个字符')
                return;
            }
            if(this.page.records[index].labelList?.length>=5){
                this.$message.error('最多只能添加五个标签~')
                item.inputVisible = false;
                item.labelItem = '';
                return;
            }
            //发送请求,请求成功,添加标签
            this.page.records[index].labelList.push(inputValue);
            const promise = post({
                url:'/base-file/file/add/label',
                data:{id:this.page.records[index].id,labelList: this.page.records[index].labelList}
            });

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.$message.success(res.message);
                    return;
                }
                this.getPage();
                this.$message.error('标签添加失败~');
            })
        }
        item.inputVisible = false;
        item.labelItem = '';
      },
      handleFileSuccess(response,file){
            console.log('response',response)
            if(response.code === 200){
                this.getPage();
                this.dialog.flag = false;
            }
      },
      getPage(){

        const promise = get({
            url:'/base-file/file/own/page',
            params:{current:this.page.current,size:this.page.size}
        });

        promise.then(res=>{
            if(res&&res.code === 200){
                this.page = res.data;
            }
        })

      },
      changePageHandler(page){
        this.page.current = page.current;
        this.page.size = page.size;
        this.getPage();
        document.documentElement.scrollTop = 0;

      },
      copyFileUrl(item){
        let fileLink = item.link;

        let  clipboard = new Clipboard('.copy-btn',{
            text:function(){
                return fileLink;
            }
        });

        clipboard.on('success',e=>{
            this.$message.success('复制分享链接成功~');
            clipboard.destroy();
        });

        clipboard.on('error',e=>{
            this.$message.error('复制分享链接失败~');

            clipboard.destroy();
        })

      },
      deleteFile(item){
        const promise = post({
            url:'/base-file/file/delete',
            data:{id:item.id}
        });

        promise.then(res=>{
            if(res){
                if(res.code === 200){
                    this.$message.success(res.message);
                    this.getPage();
                    return;
                }
                this.$message.error(res.message);
            }
        })
      }

    },
    components:{
        IButton,
        IPage

    },
    created(){
        const token =  localStorage.getItem('token');
        this.upload.headers = {'Authorization':token};
        this.getPage();
    }

}
</script>

<style scoped>

.file-name{
    font-size: 20px;
    font-weight: 600;
}
.file-label{

    margin-top: 20px;
    margin-bottom: 10px;
   /* padding: 20px; */
    display: flex;
    /* text-align: center; */
    
}

.resources-option{
    display: flex;
    justify-content: flex-end;
}

.resource-item{
    padding: 10px;
    margin-top: 20px;
    border: 1px solid #dcdfe6;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .resouces-main{
    height: 100vh;
    position: relative;
  }

</style>